<template>
  <!-- 表单 -->
  <el-form inline="true" class="permission-form" style="margin-bottom: 20px">
    <el-form-item style="margin-right: 20px">
      <el-input v-model="params.permissionName" placeholder="请您输入要搜索的权限名" style="width: 240px" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSearch">搜索</el-button>
      <el-button @click="onReset">重置</el-button>
      <el-button type="primary" :icon="Plus" @click="showAddDialog">新增权限</el-button>
    </el-form-item>
  </el-form>
  <!-- 表格 -->
  <el-table :data="permissionList" class="permission-table" style="width: 100%">
    <el-table-column prop="permissionName" label="权限名" width="180" />
    <el-table-column prop="requestMethod" label="请求方法" width="100" />
    <el-table-column prop="routerPath" label="路由路径" />
    <el-table-column prop="type" width="180px" label="类型" />
    <el-table-column prop="nickName" width="180px" label="创建人" />
    <el-table-column prop="createTime" label="创建时间" width="180px">
      <template #default="{ row }">
        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="100px" fixed="right">
      <template #default="{ row }">
        <el-button type="text" class="red" @click="handleDelete(row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background size="small" layout="total,sizes,prev,pager,next,jumper" :total="total"
    v-model:current-page="params.pageNum" v-model:page-size="params.pageSize" :page-sizes="[5, 10, 15, 20]"
    @size-change="handleSizeChange" @current-change="handleCurrentChange"
    style="position: fixed; bottom: 20px; right: 20px;" />

  <el-dialog v-model="addDialogVisible" title="新增权限" width="30%">
    <el-form :model="addForm" label-width="80px">
      <el-form-item label="权限名">
        <el-input v-model="addForm.permissionName" placeholder="请输入权限名" />
      </el-form-item>
      <el-form-item label="请求方法">
        <el-select v-model="addForm.requestMethod" placeholder="请选择请求方法">
          <el-option label="GET" value="GET" />
          <el-option label="POST" value="POST" />
          <el-option label="DELETE" value="DELETE" />
          <el-option label="PUT" value="PUT" />
        </el-select>
      </el-form-item>
      <el-form-item label="路由路径">
        <el-input v-model="addForm.routerPath" placeholder="请输入路由路径" />
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="addForm.type">
          <el-radio :label="0">类型0</el-radio>
          <el-radio :label="1">类型1</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleAdd">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>

import { ref } from "vue"
import { Plus } from "@element-plus/icons-vue"
import { getPermissionListService, deletePermissionService, addPermissionService } from "@/apis/permission";
import { reactive } from "vue";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";


const params = reactive({
  pageNum: 1,
  pageSize: 10,
  permissionName: ''
})

const addDialogVisible = ref(false)
const addForm = reactive({
  permissionName: '',
  requestMethod: '',
  routerPath: '',
  type: ''
})

function showAddDialog() {
  addDialogVisible.value = true
}

const permissionList = ref([])
const total = ref(0)

async function getPermissionList() {
  const result = await getPermissionListService(params);
  permissionList.value = result.rows
  total.value = result.total
}
getPermissionList()

function handleSizeChange(newSize) {
  // params.pageSize = newSize
  params.pageNum = 1
  getPermissionList()
}
function handleCurrentChange(newPage) {
  // params.pageNum = newPage
  getPermissionList()
}

async function handleAdd() {
  try {
    await addPermissionService(addForm)
    ElMessage.success('新增成功')
    addDialogVisible.value = false
    getPermissionList()
  } catch (error) {
    ElMessage.error('新增失败')
  }
}
async function handleDelete(row) {
  try {
    await ElMessageBox.confirm(
      '确定删除该权限吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    await deletePermissionService(row.permissionId)
    ElMessage.success('删除成功')
    getPermissionList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

async function onSearch() {
  params.pageNum = 1
  getPermissionList()
}

async function onReset() {
  params.pageNum = 1
  params.pageSize = 10
  params.permissionName = ''
  getPermissionList()
}
</script>
